<template>
  <div class="dialog-role">
    <el-dialog
      :visible.sync="dialogVisible"
      :title="field"
      width="800px"
      @close="handleClose"
    >
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="dialog-ruleForm"
      >
       

        <el-form-item label="分组名称:">
          <el-input v-model="ruleForm.name" clearable />
        </el-form-item>
       
        <el-form-item label="分组描述:">
          <el-input v-model="ruleForm.name" clearable type="textarea" autosize />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog width="400px" title="分组选择" :visible.sync="dialogMenuVisible">
      <div class="menu-permisssion">
        <el-tree
          ref="roleTree"
          :data="data"
          node-key="id"
          :default-expanded-keys="defaultExpandedKeys"
          :expand-on-click-node="false"
        >
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <svg-icon
              :icon-class="getNodeIcon(node)"
              style="width: 16px; height: 14px"
            />
            <span>{{ node.label }}</span>
          </span>
        </el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogMenuVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogMenuVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
let id = 1000;
export default {

  props: {
    value: {
      type: Boolean,
      default: false,
    },
    field: {
      type: String,
      default: "",
    },
  },
  data() {
    const data = [
      {
        id: 1,
        label: "一级 1",
        children: [
          {
            id: 4,
            label: "二级 1-1",
            children: [
              {
                id: 9,
                label: "三级 1-1-1",
              },
              {
                id: 10,
                label: "三级 1-1-2",
              },
            ],
          },
        ],
      },
      {
        id: 2,
        label: "一级 2",
        children: [
          {
            id: 5,
            label: "二级 2-1",
          },
          {
            id: 6,
            label: "二级 2-2",
          },
        ],
      },
      {
        id: 3,
        label: "一级 3",
        children: [
          {
            id: 7,
            label: "二级 3-1",
          },
          {
            id: 8,
            label: "二级 3-2",
          },
        ],
      },
    ];
    return {
      ruleForm: {
        name: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      data: JSON.parse(JSON.stringify(data)),
      collapse: false,
      radio: "",
      dialogMenuVisible: false,
      // 确保 defaultExpandedKeys 在 data 中正确定义
      defaultExpandedKeys: [],
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("close", val);
      },
    },
  },
  watch: {
    collapse(val) {
      this.handleCollapseChange(val);
    },
    // 监听 dialogMenuVisible 变化
    dialogMenuVisible: {
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            this.setDefaultExpandedKeys();
          });
        }
      },
      immediate: true,
    },
  },
  mounted() {
    // 组件挂载后初始化默认展开节点
    this.setDefaultExpandedKeys();
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
      this.$emit("close");
    },

    handleCollapseChange(val) {
      if (val) {
        this.expandAllNodes(true);
      } else {
        this.expandAllNodes(false);
      }
    },

    expandAllNodes(expand) {
      const nodes = this.$refs.roleTree.store._getAllNodes();
      nodes.forEach((node) => {
        node.expanded = expand;
      });
    },

    append(data) {
      const newChild = { id: id++, label: "testtest", children: [] };
      if (!data.children) {
        this.$set(data, "children", []);
      }
      data.children.push(newChild);
    },

    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      children.splice(index, 1);
    },

    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          <span>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.append(data)}
            >
              Append
            </el-button>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.remove(node, data)}
            >
              Delete
            </el-button>
          </span>
        </span>
      );
    },

    getNodeIcon(node) {
      if (node.childNodes && node.childNodes.length > 0) {
        return "fold";
      } else {
        return "file";
      }
    },

    // 设置默认展开第一个子节点
    setDefaultExpandedKeys() {
      const expandedKeys = [];

      // 如果有数据且第一个元素有子节点，则展开第一个根节点
      if (this.data && this.data.length > 0) {
        this.data.forEach((item) => {
          // 展开所有一级节点，这样它们的二级子节点就会显示出来
          expandedKeys.push(item.id);
        });
      }

      this.defaultExpandedKeys = expandedKeys;
    },
  },
};
</script>

<style scoped lang="scss">
.dialog-role {
  .dialog-ruleForm {
    width: 80%;
    line-height: 60px;
    margin: 0 auto;
  }
  .menu-permisssion {
    border: 1px solid #dcdfe6;
    padding: 15px;
    border-radius: 4px;
  }
}
</style>
